<template>
  <div class="active-basic">
    <div class="common-form">字段信息</div>
    <el-form-item label="字段管理" prop="tableData">
      <el-button icon="Plus" @click="addField">添加字段</el-button>
      <div class="pt16">
        <div class="d-a-c border-t border-l border-r">
          <div style="width: 40px;" class="d-c-c border-r">排序</div>
          <div style="min-width: 200px;" class="flex-1 d-c-c border-r">名称</div>
          <div style="width: 200px;" class="d-c-c border-r">类型</div>
          <div style="min-width: 200px;" class="flex-1 d-c-c border-r">备选值(以英文逗号隔开)</div>
          <div style="width: 40px;" class="d-c-c border-r">必填</div>
          <div style="width: 200px;" class="d-c-c border-r">验证类型</div>
          <div style="width: 80px;" class="d-c-c">操作</div>
        </div>
        <draggable class="wrapper border-b" v-model="form.tableData"> 
          <template #item="{ element, index }">
            <div class="d-a-c border-t border-l border-r">
              <div class="icon iconfont icon-tuodong d-c-c p6 border-r" style="width: 40px;"></div>
              <div style="min-width: 200px;"  class="flex-1 p6 border-r d-c-c">
                <el-input type="text" v-model="element.name"></el-input>
              </div>
              <div style="width: 200px;" class="d-c-c p6 border-r">
                <el-select v-model="element.type" placeholder="请选择">
                  <el-option v-for="(fitem, findex) in fields" :key="findex" :label="fitem.name" :value="fitem.type">
                  </el-option>
                </el-select>
              </div>
              <div style="min-width: 200px;"  class="flex-1 p6 d-c-c border-r">
                <el-input type="text" v-model="element.select_value"
                  :disabled="element.type !='radio' && element.type !='radio-group' && element.type !='select'">
                </el-input>
              </div>
              <div style="width: 40px;" class="d-c-c p6 border-r">
                <el-checkbox v-model="element.is_required"></el-checkbox>
              </div>
              <div style="width: 200px;" class="d-c-c p6 border-r">
                <el-select v-model="element.rule" placeholder="请选择">
                  <el-option v-for="(ritem, rindex) in rules" :key="rindex" :label="ritem.name" :value="ritem.type">
                  </el-option>
                </el-select>
              </div>
              <div style="width: 80px;" class="d-c-c p6">
                <el-button type="text" size="small" @click.stop="deleteItem(index)">删除</el-button>
              </div>
            </div>
          </template>
        </draggable>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  },
  props: {
    form: Object
  },
  data() {
    return {
      fields: [
        {
          name: '单行文本',
          type: 'text'
        },
        {
          name: '多行文本',
          type: 'textarea'
        },
        {
          name: '单选',
          type: 'radio'
        },
        {
          name: '多选',
          type: 'radio-group'
        },
        {
          name: '下拉框',
          type: 'select'
        },
        {
          name: '图片',
          type: 'image'
        },
        {
          name: '地区选择',
          type: 'area'
        },
        {
          name: '时间选择',
          type: 'time'
        }
      ],
      rules: [
        {
          name: '不验证',
          type: 'no'
        },
        {
          name: '数字',
          type: 'number'
        },
        {
          name: '手机号码',
          type: 'mobile'
        },
        {
          name: '座机或手机号码',
          type: 'phone'
        },
        {
          name: '电子邮箱',
          type: 'email'
        },
        {
          name: '身份证',
          type: 'idcard'
        }
      ]
    };
  },
  methods: {
    addField() {
      this.form.tableData.push({
        name: '',
        type: 'text',
        isRequired: true,
        rule: 'no'
      });
    },
    deleteItem(index) {
      this.form.tableData.splice(index, 1);
    }
  }
};
</script>

<style>
.mb8 {
  margin-bottom: 8px;
}
.p6 {
  padding: 6px;
}
</style>